<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px solid;
            text-align: center;
            width: 800px;
            margin: auto;
        }

        tr, td {
            border: 1px solid;
        }
    </style>
</head>
<body>
<input type="text" placeholder="请输入学生学号：" id="sno">
<input type="text" placeholder="请输入学生名称：" id="name">
<input type="text" placeholder="请输入学生年龄：" id="age">
<input type="text" placeholder="请输入学生成绩：" id="score">
<input type="button" value="增加学生" id="button">
<table>
    <caption> 学生成绩统计表</caption>
    <!--标题标签-->
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th><th>操作</th>
    </tr>
    <tr>
        <td>001</td>
        <td>光头强</td>
        <td>18</td>
        <td>59</td><td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
    </tr>
    <tr>
        <td>002</td>
        <td>灰太狼</td>
        <td>19</td>
        <td>88</td>
        <td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
    </tr>
</table>

<script !src="">
    // 1. 选中按钮
    var btn = document.getElementById("button");
    // 2. 给按钮绑定事件
    btn.addEventListener("click", function () {
        // 3. 获取输入框的内容
        // innerHTML、innerText、 value
        var sno = document.getElementById("sno").value;
        var name = document.getElementById("name").value;
        var age = document.getElementById("age").value;
        var score = document.getElementById("score").value;

        // 4. 创建存放sno的td
        let sno_td = document.createElement("td")
        // 给td创建一个存放文本内容的文本节点对象
        let sno_text = document.createTextNode(sno)
        // 给sno的td放入获取的sno值
        sno_td.appendChild(sno_text);

        // 4. 创建存放name的td
        let name_td = document.createElement("td")
        let name_text = document.createTextNode(name)
        name_td.appendChild(name_text)

        // 4. 创建存放age的td
        let age_td = document.createElement("td")
        let age_text = document.createTextNode(age)
        age_td.appendChild(age_text)

        // 4. 创建存放score的td
        let score_td = document.createElement("td")
        let score_text = document.createTextNode(score)
        score_td.appendChild(score_text)

        // 4. 创建存放 删除标签 的td
        let del_td = document.createElement("td")
        // 创建a标签对象
        var a = document.createElement("a");
        // 给a标签对象添加href和onclick属性
        a.setAttribute('href', 'javascript:void(0)');
        a.setAttribute("onclick",'del(this)')
        // 创建文本节点对象
        let del_text = document.createTextNode("删除")
        // 将文本内容放入a标签
        a.appendChild(del_text);
        // 将a标签对象，放入td中
        del_td.appendChild(a)

        // 5. 创建tr节点对象
        let tr = document.createElement("tr")
        tr.appendChild(sno_td)
        tr.appendChild(name_td)
        tr.appendChild(age_td)
        tr.appendChild(score_td)
        tr.appendChild(del_td)

        // 6. 将tr对象放置到table对象中
        let table = document.getElementsByTagName("table")[0]
        table.appendChild(tr)

    })

    // 删除
    function del(object){
       // object就是指定传入的对象，而传入的对象是被点击的a标签对象
       // 找到当前对象的父级标签td，再找到td的父标签tr，然后从table将该tr删除
        let tr = object.parentNode.parentNode;
        // alert(tr)

        // let table = document.getElementsByTagName("table")[0];
        let table = object.parentNode.parentNode.parentNode;
        table.removeChild(tr)
    }


    // 移除事件 removeEventListener（"事件名称“，function(){}）
</script>
</body>
</html>